<template>
  <div class="student_container">
    <div class="not_reviewed">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="资产负债表" name="1">
          <div class="table_box">
            <el-table :data="balanceSheet" style="width: 100%;border: 1px solid #DCE0E3;border-radius: 4px;"
                :header-cell-style="{'text-align':'center'}" :cell-style="{'text-align':'center'}">
              <el-table-column prop="date" label="资产" width="180">
              </el-table-column>
              <el-table-column prop="name" label="行次" width="180">
              </el-table-column>
              <el-table-column prop="address" label="期末余额">
              </el-table-column>
              <el-table-column prop="date" label="年初余额" width="180">
              </el-table-column>
              <el-table-column prop="name" label="负债和所有者权益" width="180">
              </el-table-column>
              <el-table-column prop="date" label="行次" width="180">
              </el-table-column>
            </el-table>
          </div>
        </el-tab-pane>
        <el-tab-pane label="利润表" name="2">
          <div class="table_box">
            <el-table :data="incomeStatement" style="width: 100%;border: 1px solid #DCE0E3;border-radius: 4px;"
                :header-cell-style="{'text-align':'center'}" :cell-style="{'text-align':'center'}">
              <el-table-column prop="date" label="资产" width="180">
              </el-table-column>
              <el-table-column prop="name" label="行次" width="180">
              </el-table-column>
              <el-table-column prop="address" label="期末余额">
              </el-table-column>
              <el-table-column prop="date" label="年初余额" width="180">
              </el-table-column>
              <el-table-column prop="name" label="负债和所有者权益" width="180">
              </el-table-column>
              <el-table-column prop="date" label="行次" width="180">
              </el-table-column>
            </el-table>
          </div>
        </el-tab-pane>
        <el-tab-pane label="现金流量表" name="3">
          <div class="table_box">
            <el-table :data="cashFlowStatement" style="width: 100%;border: 1px solid #DCE0E3;border-radius: 4px;"
                :header-cell-style="{'text-align':'center'}" :cell-style="{'text-align':'center'}">
              <el-table-column prop="date" label="资产" width="180">
              </el-table-column>
              <el-table-column prop="name" label="行次" width="180">
              </el-table-column>
              <el-table-column prop="address" label="期末余额">
              </el-table-column>
              <el-table-column prop="date" label="年初余额" width="180">
              </el-table-column>
              <el-table-column prop="name" label="负债和所有者权益" width="180">
              </el-table-column>
              <el-table-column prop="date" label="行次" width="180">
              </el-table-column>
            </el-table>
          </div>
        </el-tab-pane>
      </el-tabs>

    </div>
  </div>
</template>

<script>
  // import commonHeader from "@/components/header/new_header.vue";
  // import commonHeader from "@/components/header/header.vue";
  // import asideNav from "./components/asideNav.vue";
  // import tags from "./components/tags.vue";
  import {
    mapState
  } from "vuex";
  export default {
    provide() {
      return {
        reload: this.reload,
      };
    },
    name: "projectDetails",
    data() {
      return {
        cashFlowStatement:[],
        balanceSheet:[],
        incomeStatement:[],
        activeName: "1",
        tableData: []
      };
    },
    mounted() {},
    components: {
      // commonHeader,
      // asideNav,tags
    },
    computed: {
      ...mapState({
        // userInfo: ["userInfo"],
        // personalDetails: ["personalDetails"],
      }),
    },
    created() {
      console.log('assets')
      this.GetProfitStatement();
      this.GetBalanceSheet();
      this.GetCashFlowStatement();
    },
    methods: {
      GetCashFlowStatement(){
        let params = {
          caseId:1295753393586177
        };
        this.$Api.GetCashFlowStatement(params)
          .then(res => {
            if (res.code == 200) {
              console.log(res)
              this.cashFlowStatement = res.data.models;
            }
          })
          .catch(err => {
            console.log(err, "err");
          });
      },
      GetBalanceSheet(){
        let params = {
          caseId:1295753393586177
        };
        this.$Api.GetBalanceSheet(params)
          .then(res => {
            if (res.code == 200) {
              console.log(res)
              this.balanceSheet = res.data.models;
            }
          })
          .catch(err => {
            console.log(err, "err");
          });
      },
      GetProfitStatement(){
        let params = {
          caseId:1295753393586177
        };
        this.$Api.GetProfitStatement(params)
          .then(res => {
            if (res.code == 200) {
              console.log(res)
              this.incomeStatement = res.data.models;
            }
          })
          .catch(err => {
            console.log(err, "err");
          });
      },
      handleClick(tag) {

      },
    },
    watch: {

    }
  };
</script>

<style lang="less" scoped="scoped">
  .not_reviewed {
    /deep/.el-tabs {
      .el-tabs__nav-scroll {
        // padding-left: 30px;
      }

      .el-tabs__nav-wrap::after {
        height: 1px;
      }

      .el-tabs__item {
        padding: 0;
        text-align: center;
        width: 142px;
        width: 142px;
        height: 60px;
        line-height: 60px;
      }

      .el-tabs__item.is-active {
        background: #EAF3FF;
      }
    }

    .table_box {
      padding: 20px;
      padding-top: 5px;
      box-sizing: border-box;
      /deep/.el-table {
        &::before{
          display: none;
        }
        thead{
          th{
              background-color: #F6F7F9;
              color: #666666;
              font-weight: normal;
          }
        }
      }
    }
  }
</style>
